{% extends 'base.html' %}

{% block title %}Latest Posts - MyBlog{% endblock %}

{% block content %}
<h1 class="mb-4">Latest Posts</h1>


<!-- 搜索框 -->
<form class="mb-4" method="get" action=".">
    <div class="input-group">
        <input type="text" name="q" class="form-control" placeholder="Search posts...">
        <button class="btn btn-outline-secondary" type="submit">Search</button>
    </div>
</form>

<!-- 文章列表 -->
{% for post in posts %}
<div class="card mb-4">
    {% if post.image %}
    <img src="{{ post.image.url }}" class="card-img-top" alt="{{ post.title }}">
    {% endif %}

    <div class="card-body">
        <h2 class="card-title">
            <a href="{% url 'post-detail' post.pk %}" class="text-decoration-none">{{ post.title }}</a>
        </h2>
        <p class="text-muted">
            By {{ post.author.username }} | {{ post.created_at|date:"F d, Y" }} |
            Category: <a href="#">{{ post.category.name }}</a>
        </p>
        <p class="card-text">{{ post.content|truncatewords:50 }}</p>
        <a href="{% url 'post-detail' post.pk %}" class="btn btn-primary">Read More →</a>
    </div>
    <div class="card-footer text-muted">
        Tags:
        {% for tag in post.tags.all %}
        <span class="badge bg-secondary">{{ tag.name }}</span>
        {% endfor %}
    </div>
</div>
<!-- 文章列表示例 -->
<div class="post-list">
    <div class="post">
        <h3><a href="/post/1/">Django入门教程</a></h3>
        <div class="meta">发布于 2023-10-15 | 分类: 技术</div>
        <p>本文介绍Django框架的基础使用方法...</p>
    </div>
</div>

<!-- 添加热门文章和分类 -->
<div class="sidebar-section">
    <h4>热门分类</h4>
    <ul>
        {% for cat in categories %}
        <li><a href="?category={{ cat.id }}">{{ cat.name }}</a></li>
        {% endfor %}
    </ul>
</div>
<!-- 在首页添加创建文章引导 -->
{% if not posts and user.is_authenticated %}
<div class="alert alert-info">
    还没有文章，点击 <a href="{% url 'post-create' %}">这里</a> 创建第一篇！
</div>
{% endif %}
<!-- 添加热门文章和分类 -->
<div class="sidebar-section">
    <h4>热门分类</h4>
    <ul>
        {% for cat in categories %}
        <li><a href="?category={{ cat.id }}">{{ cat.name }}</a></li>
        {% endfor %}
    </ul>
</div>
{% empty %}
<div class="alert alert-info">No posts yet.</div>
{% endfor %}
<!-- 页脚上方添加分页 -->
<div class="pagination">
    <span class="step-links">
        {% if page_obj.has_previous %}
            <a href="?page=1">&laquo; 首页</a>
            <a href="?page={{ page_obj.previous_page_number }}">上一页</a>
        {% endif %}

        <span class="current">
            第 {{ page_obj.number }} 页（共 {{ page_obj.paginator.num_pages }} 页）
        </span>

        {% if page_obj.has_next %}
            <a href="?page={{ page_obj.next_page_number }}">下一页</a>
            <a href="?page={{ page_obj.paginator.num_pages }}">末页 &raquo;</a>
        {% endif %}
    </span>
</div>
<!-- 分页 -->
{% if is_paginated %}
<nav aria-label="Page navigation">
    <ul class="pagination justify-content-center">
        {% if page_obj.has_previous %}
        <li class="page-item">
            <a class="page-link" href="?page={{ page_obj.previous_page_number }}">Previous</a>
        </li>
        {% endif %}

        <li class="page-item active">
            <span class="page-link">
                Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
            </span>
        </li>

        {% if page_obj.has_next %}
        <li class="page-item">
            <a class="page-link" href="?page={{ page_obj.next_page_number }}">Next</a>
        </li>
        {% endif %}
    </ul>
</nav>
{% endif %}
{% endblock %}